<template>
	<div class="warpper">
		<van-field v-model="real_name" label="联系人" required placeholder="请输入" />
		<van-field v-model="phone" type="tel" label="手机号" required placeholder="请输入" />
		<!-- 点击了请选择就弹框 -->
		<van-field v-model="address" readonly  label="选择地址" placeholder="请选择" @focus="addressShow=true" />
		<!-- 弹框，选择湖南省益阳市这种 然后只要点击了就会触发openPopup-->
		<van-popup v-model="addressShow" round position="bottom" :style="{ height: '40%' }">
			<van-area title="请选择" :area-list="areaList" @confirm="openPopup" />
		</van-popup>
		<van-field v-model="detail" required label="详细地址" placeholder="请输入" />
		<van-field v-model="post_code" label="收货邮政编码" placeholder="请输入" />
		<van-cell title="设为默认" icon="shop-o" class="checkeds">
			<template #right-icon>
				<van-switch v-model="checked" size="24px" />
			</template>
		</van-cell>
		<div class="btn">
			<van-button type="danger" round block @click="submit">提交</van-button>
			<!-- 通过show控制是否展示删除按钮 -->
			<van-button type="warning" round block @click="del()" style="margin-top: 15px;" v-if="show">删除</van-button>
		</div>
	</div>
</template>

<script>
	

	import {
		getDataDetails,
		delAddress,
		getAddressList,
		editAddress
	} from "@/api/address.js"
	export default {
		data() {
			return {
				addressData: {},
				checked: false,
				address: null,
				addressShow: false,
				areaList: null,
				real_name: null,
				phone: null,
				detail: null,
				post_code: null,
				addressList: [],
				editingContact: {},
				show:false
			};
		},

		created() {
			this.getData()
			this.getList()
		},
		methods: {
			//新增or修改
			getData() {
				//传了id过来肯定就是修改
				if (this.$route.params.id) {
					//show控制的是是否展示删除按钮
					this.show=true
					getDataDetails({
						id: this.$route.params.id
					}).then(res => {

						this.real_name = res.data.realName
						this.phone = res.data.phone
						this.detail = res.data.detail
						this.post_code = res.data.postCode
						this.address = res.data.province + ',' + res.data.city + ',' + res.data.district
						if (res.data.isDefault == 1) {
							this.checked = true
						}
						this.addressList = [{
							name: res.data.province
						}, {
							name: res.data.city
						}, {
							name: res.data.district
						}]
					})
				}
			},
			getList(){
				getAddressList().then(res=>{
					this.areaList=res.data
				})
			},
			submit() {
				let addressInfo = {
					id: this.$route.params.id == null ? null : this.$route.params.id,
					real_name: this.real_name,
					phone: this.phone,
					detail: this.detail,
					post_code: this.post_code,
					is_default: this.checked,
					address: {
						 district: this.addressList[2].name,
						city: this.addressList[1].name,
						province: this.addressList[0].name,
					}
				}
				if (!addressInfo.real_name) {
					this.$toast("请填写收货人姓名");
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(addressInfo.phone)) {
					this.$toast("请填正确的电话号码");
					return;
				}
				if (!addressInfo.detail) {
					this.$toast("请填写详细地址");
					return;
				}

				editAddress(addressInfo).then(res => {
					if (res.status == 200) {
						this.$toast("操作成功！")
						this.$router.back()
					}
				})

			},
			del() {
				delAddress({
					id: this.$route.params.id
				}).then(res => {
					if (res.status == 200) {
						this.$toast("操作成功！")
						this.$router.back()
					}
				})
			},
			//选取地址
			openPopup(data) {
				//传过来的Data是个二维数组，键值为name
				//形似[[name:'湖南省'],[name:'长沙市'],[name:'望城区']]
				let address = ""
				for (let i = 0; i < data.length; i++) {
					if (i == data.length - 1) {
						address = address + data[i].name
					} else {
						address = address + data[i].name + ","
					}
				}
				//湖南省,长沙市,望城区
				this.address = address
				//addressList因为要提交给后端，所以还是使用数组形式
				this.addressList = data 
				//关闭弹窗
				this.addressShow = false
			},
			onSave(contactInfo) {},
			onDelete(contactInfo) {},
		},
	};
</script>

<style scoped>
	.warpper {
		margin-top: 7px;
		padding: 5px;
	}

	.checkeds {
		margin-top: 10px;
	}

	.btn {
		width: calc(100% - 20px);
		margin: 30px auto;
	}
</style>
